<template>
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="3" v-for="(o,index) in 1" :key="o"
                        :offset="index >0 ? 1:1"
                >
                    <el-card v-if="true" :body-style="{padding:'20px'}" class="singleCards">
                        <img style="height: 100px;width: 100px" src="../../../static/img/m.jpg" alt="暂无图片" @click="newproject()"
                             class="img"
                        >
                        <div style="padding: 14px">
                            <span>添加项目</span>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="3" v-for="(o,index) in site" :key="o.id"
                        :offset="index >0 ? 1:1"
                >
                    <el-card :body-style="{padding:'20px'}" class="singleCards">
                        <img v-bind:src="o.fields.pj_img"
                             alt="暂无图片"
                             @click="jumpGroup(o.pk)"
                             class="singleCards"
                             style="height: 160px;width: 160px"
                        >
                        <div style="padding: 14px">
                            <div class="bottom clearfix">
                                <time class="time">{{o.fields.remark }}</time>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>

    </el-container>
</template>

<script>
    import {getproject} from "../../request/api.js";
    import {Message} from 'element-ui'

    export default {
        name: "showAddProject",
        data() {
            return {
                site: [],
                img1: ""
            }
        },
        methods: {
            getproject() {
                getproject().then((response) => {
                    if (response.data["code"] == 200) {
                        this.site = response.data["data"];
                    } else {
                        Message.warning("API异常");
                    }
                });
            },
            newproject() {
                this.$router.push({name: "addProject", query: null})
            },
            jumpGroup(id) {
                this.$router.push({name: "addGroup", params: {id: id}}) // 带参数跳转页面
            }
        },
        mounted: function () {
            this.getproject();
        }
    }
</script>

<style lang="scss" scoped>
    .time {
        font-size: 14px;
        color: #999;
    }

    .bottom {
        margin-top: 15px;
        line-height: 18px;
    }

    .img {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .singleCards {
        width: 180px;
        height: 250px;
        margin-bottom: 10px;
        img{
            cursor: pointer;
        }
    }

    .singleCards:hover {
        box-shadow: 2px 4px 3px #999999;
    }


</style>